<!--
 @description
 @fileName NavFilter.vue
 @author zengqiongying
 @created 2022/02/22 14:51:16
-->
<template>
  <div class="nav-filter" @scroll.stop>
    <div class="nav-container" @touchmove.stop>
      <div class="nav-relative">
        <!-- 一级导航 -->
        <NavBar v-if="levelOneData.length>0" horizontal media :space="false">
          <span
            v-for="(item, i) in levelOneData"
            :key="i"
            :class="['nav-level-one', {'nav-level-one-active': item.id === selectedPageId}]"
            @click.stop="seleckClickHandle(i,item)"
          >{{ item.pageName }}</span>
        </NavBar>
        <div class="nav-search" @click="searchHandle">
          <svg-icon class="search-icon" icon-class="sousuo-line" />
          搜索
        </div>
      </div>
    </div>
    <!-- 过滤 -->
    <div :style="{paddingTop: height + 10 + 'px'}">
      <slot />
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import { getHelpCenterPage } from '@/apis/helpCenter'
export default {
  name: 'HelpNavFilter',
  components: {
    NavBar
  },
  props: {

  },
  data() {
    return {
      height: 54,
      levelOneData: [],
      fixedFun: null,
      selectedIndex: 0,
      selectedPageId: ''
    }
  },
  computed: {

  },
  watch: {
    selectedPageId() {
      this.touchHandle()
    }
  },
  created() {
    this.$on('helpNext', this.next)
    this.$on('helpPrev', this.prev)
    this.getPageList()
  },
  mounted() {
    this.fixedFun = this.$touch(this.touchHandle, this)
    this.$nextTick(() => {
      const navContainer = this.$el.querySelector('.nav-container')
      if (navContainer) {
        this.height = navContainer.getBoundingClientRect().height
      }
    })
  },
  beforeDestroy() {
    this.fixedFun()
  },
  methods: {
    getPageList() {
      getHelpCenterPage().then(res => {
        if (res.success === 1) {
          this.levelOneData = res.data || []
          this.selectedIndex = 0
          this.selectedPageId = this.levelOneData.length > 0 ? this.levelOneData[0].id : ''
          this.$emit('change', this.selectedPageId)
        }
      })
    },
    seleckClickHandle(index, data) {
      if (this.selectedPageId === data.id) return
      this.selectedPageId = data.id
      this.selectedIndex = index
      this.$emit('change', this.selectedPageId)
    },
    // 滚动回调
    touchHandle(x, y) {
      if (sessionStorage.getItem('forbid')) {
        this.showNav = true
        return
      }
      if (Math.abs(x || 0) > 20 && Math.abs(y || 0) < 20) {
        this.showNav = true
      } else if (y !== undefined) {
        this.showNav = y > 20
      }
      this.$nextTick(() => {
        const navContainer = this.$el.querySelector('.nav-container')
        this.height = navContainer.getBoundingClientRect().height
        // console.log(x, y, this.height)
      })
    },
    // 切换一级导航
    prev() {
      let index = this.selectedIndex + 1
      if (index >= this.levelOneData.length) {
        index = 0
      }
      this.seleckClickHandle(index, this.levelOneData[index])
    },
    next() {
      let index = this.selectedIndex - 1
      if (index < 0) {
        index = this.levelOneData.length - 1
      }
      this.seleckClickHandle(index, this.levelOneData[index])
    },
    searchHandle() {
      this.$router.push({ name: 'HelpCenterSearch' })
    }
  }
}
</script>
<style lang="less" scoped>
@color8: #333;
@color3: #12B9A3;
@colorBg: #12B9A3;
.nav-filter{
  position: relative;
  .nav-container{
    position: fixed;
    width: 100%;
    z-index: 999;
  }
  .nav-relative{
    position: relative;
    background: #fff;
    min-height: 24px;
    padding-right:90px;
    border-bottom: 1px solid #F5F6F7;
    .border-bottom{
      border-bottom: 0 !important;
    }
  }
  .nav-search{
    position: absolute;
    z-index: 99;
    right: 10px;
    top: 50%;
    margin-top: -12px;
    width: 70px;
    height: 24px;
    line-height: 24px;
    background: #F5F6F7;
    border-radius: 12px;
    color:#AAA;
    font-size:12px;
    letter-spacing: 1px;
    padding-left: 30px;
    box-sizing: border-box;
    .search-icon{
      font-size: 13px;
      color:#AAA;
      position:absolute;
      left:10px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  // 一级导航
  .nav-level-one{
    font-size: 14px;
    font-weight: 500;
    color: @color8;
    line-height: 20px;
    letter-spacing: 1px;
  }
  .nav-level-one + .nav-level-one{
    margin-left:30px;
  }
  .nav-level-one-active{
    position: relative;
    color: @color3;
    line-height: 22px;
    font-size: 16px;
    &::after{
      content: "";
      position: absolute;
      left: 50%;
      bottom: -5px;
      transform: translateX(-50%);
      display: block;
      width: 50%;
      height: 2px;
      background-color: @colorBg;
      border-radius: 2px;
    }
  }
}
</style>
<style>
  .limit-scroll{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
  }
</style>
